<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/categories' }"
        >商品分类</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="main">
      <div class="displays">
        <el-row>
          <el-button type="primary" @click="Addcate()">添加分类</el-button>
        </el-row>
      </div>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          border
          row-key="cat_id"
          :tree-props="{ children: 'children' }"
        >
          <el-table-column prop="index" type="index" label="#" width="60">
          </el-table-column>
          <el-table-column prop="cat_name" label="分类名称" width="180">
          </el-table-column>
          <el-table-column prop="" label="是否有效" width="180">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.cat_deleted"
                size="mini"
                type="success"
                icon="el-icon-check"
                circle
              ></el-button>
              <el-button
                v-else
                size="mini"
                type="danger"
                icon="el-icon-close"
                circle
              ></el-button>
            </template>
          </el-table-column>
          <el-table-column prop="cat_level" label="排序">
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.cat_level == 0
                    ? ''
                    : scope.row.cat_level == 1
                    ? 'success'
                    : 'warning'
                "
                >{{ scope.row.cat_level | level }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="scope">
              <el-button type="success" @click="setselect(scope.row)">
                <i class="el-icon-edit"></i>
                修改
              </el-button>
              <el-button type="danger" @click="delDatas(scope.row)">
                <i class="el-icon-delete-solid"></i>
                删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <template>
        <div class="block">
          <!-- size-change   当 pageSize 改变时会触发 -->
          <!-- current-change 当	currentPage 改变时会触发 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pagenum"
            :page-sizes="[1, 2, 5, 10, 20]"
            :page-size="params.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalpage"
          >
          </el-pagination>
        </div>
      </template>
    </div>
    <!-- 添加分类 -->
    <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules">
        <el-form-item label="分类名称">
          <el-input
            autocomplete="off"
            v-model="addForm.cat_name"
            class="setinput"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级分类" style="margin-left: 10px">
          <el-cascader
            class="select"
            :options="options"
            :props="props"
            v-model="addForm.selectedOptions"
            clearable
            @change="xuanzhe"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="adddialog"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑分类 -->
    <el-dialog title="添加用户" :visible.sync="selectFormVisible">
      <el-form ref="editform" :model="editform" role="rules">
        <el-form-item label="分类名称" prop="">
          <el-input
            v-model="editform.cat_name"
            autocomplete="off"
            class="setinput"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  GoodsUesr,
  Addcategories,
  selectCate,
  updataCate,
  delataCate,
} from "../../api/index";
export default {
  name: "",
  data() {
    return {
      // 级联选择器的数据源
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
      ],
      tableData: [],
      totalpage: 0, //总条目数
      // users: 0,
      params: {
        type: [1, 2, 3],
        pagenum: 1, //页码
        pagesize: 2, //数据条数
      },
      dialogFormVisible: false, //显示隐藏添加用户按钮
      selectFormVisible: false, // 编辑分类数据
      // validateMobile :false,
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      editform: {
        cat_id: "",
        cat_name: "",
      },
      // 级联选择器选中后的数据
      addForm: {
        cat_name: "",
        selectedOptions: 0,
        cat_level:0,
      },
      // props表示配置级联选择器展示的数据字段
      props: {
        value: "cat_id",
        label: "cat_name",
      },
      //验证规则
      rules: {
        cat_name: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.getGoodsUesr();
  },
  filters: {
    level: function (value) {
      if (value == 0) {
        return (value = "一级");
      } else if (value == "1") {
        return (value = "二级");
      } else {
        return (value = "三级");
      }
    },
  },
  methods: {
    async getGoodsUesr() {
      let {
        data: { result, pagesize, pagenum, total },
      } = await GoodsUesr(this.params);
      this.params = {
        pagenum: pagenum,
        pagesize: pagesize,
      };
      this.totalpage = total;
      this.tableData = result;
      
    },
    handleSizeChange(val) {
      this.params.pagesize = val;
      this.getGoodsUesr();
    },
    handleCurrentChange(val) {
      this.params.pagenum = val;
      this.getGoodsUesr();
    },
    // 添加分类
    async Addcate() {
      this.dialogFormVisible = true;
      let {
        data,
        meta: { status },
      } = await GoodsUesr({ type: "2" });
      if (status == 200) {
        this.options = data;
      }
    },
    xuanzhe(result){
         this.addForm.selectedOptions = result[1];
         this.addForm.cat_level = result.length;
    },
   async adddialog() {
       let obj = {
         cat_pid:this.addForm.selectedOptions,
         cat_name:this.addForm.cat_name,
         cat_level:this.addForm.cat_level
         
       }
     let {data,meta:{msg,status}} = await Addcategories(obj);
        if(status == 201) this.$message.success({message:msg})
        this.addForm.cat_name = ""
        this.addForm.selectedOptions =""
        this.getGoodsUesr()

// getCheckedNodes
      this.dialogFormVisible = false;
    },
    // 修改
    setselect(row) {
      console.log(row);
      this.editform.cat_id = row.cat_id;
      this.editform.cat_name = row.cat_name;
      this.selectFormVisible = true;
    },
    async updateCate() {
      let {
        meta: { msg, status },
      } = await updataCate(this.editform);
      if (status == 200) {
        this.$message({ type: "success", message: msg });
        this.getGoodsUesr();
      } else {
        this.$message({ type: "warning", message: "分配权限失败！" });
      }
      this.selectFormVisible = false;
    },
    async delDatas(row) {
      let res = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (!res) return this.$message("取消删除");
      let {
        meta: { msg, status },
      } = await delataCate(row.cat_id);
      status == 200 ? this.$message.success(msg) : this.$message.warning(msg);
      if (status == 200) return this.getGoodsUesr();
    },
    //搜索功能
    getSearchUsers() {},
  },
};
</script>

<style scoped lang='css'>
.el-breadcrumb {
  background-color: #eaedf1;
}
.displays {
  display: flex;
  margin-bottom: 20px;
}
.el-input {
  width: 450px;
  margin-right: 15px;
}
.main {
  padding: 25px;
  background-color: #fff;
  height: auto;
}
.block {
  display: flex;
}

.span {
  display: flex;
}

.el-breadcrumb {
  padding-left: 0;
}
.setinput {
  width: 85%;
}
.select {
  width: 85%;
}
</style>